<!--
 * @Author: your name
 
 * @Date: 2021-08-16 14:20:27
 * @LastEditTime: 2021-08-26 11:29:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \orderSystems\src\views\menuMag\MenuCategory.vue
-->

<template>
  <!--菜品类别组件-->
  <div id="menu-category">
    <!-- 查询部分 -->
    <Search :moudleName="tableName" @shareSearchStatus="shareSearchStatus"></Search>
    <!-- 表格数据部分 -->
    <div class="table-box">
      <DishTable 
      :moudleName="tableName" 
      :tableType="tableType"
      :tableDatas="tableData"
      :clickNowPage="page"
      :pageCount="pageSize"
      :nowPageSize="nowTotalSize"
      @shareData="shareData" 
      ></DishTable>
       <!-- 分页部分 -->
      <Pagination
      :totalCount="allCount"
      @shareData="shareData"
      ></Pagination>
     
    </div>
  </div>
</template>

<script>
import Search from "./search.vue";
import DishTable from "./DishTable.vue";
import Pagination from "@/components/common/Pagination";
export default {
  components: {
    Search,
    DishTable,
    Pagination,
  },
  data() {
    return {
      tableName: "菜品类别", //模块名字
      tableType: "类别名称", //表格数据的表头内容
      tableData:[],//表格需要渲染的数据
      page:1,//分页页码
      pageSize:5,//每页展示数据条数
      allCount:0,//总数据条数
      nowTotalSize:0,//当前页实际数据数量
      flag:false,//查询的标志变量，false表示没查询
      name:'',//查询的名字
    };
  },
  created() {
    this.getDishesCategorySearchInfo(this.name,this.page,this.pageSize);//初始化渲染页面
  },
  methods: {
    /**
     * @description: 使用查询功能时，子传父触发的事件
     * @param {*} v 从search子组件接收的数据
     * @return {*}
     */    
    shareSearchStatus(v){
      this.tableData=v.tableData;//查询的数据
      this.flag=v.searchStatus;//代表查询的状态标志
      this.allCount=v.totalCount;//查询的总条数
      this.name=v.name;//查询的名字
    },
    /**
     * @description: 表格子组件和分页子组件向父组件传值触发的函数
     * @param {*} v 传给父组件值 是一个对象
     * @return {*}
     */    
    shareData(v){
      this.page=v.nowPage;//当前页
      this.pageSize=v.pageCount; //当前页数据条数
      // if(this.flag){//使用查询功能时，渲染的表格数据
        // console.log('xxxxxx');
        this.getDishesCategorySearchInfo(this.name,this.page,this.pageSize)
      // }else{//没有使用查询功能时，渲染表格的数据
      //   this.getDishesCategoryInfo(this.page,this.pageSize);//更新表格数据
      // }
    },
   /* *
     * @description: 获取当前页的数据函数
     * @param {*} page 当前页码
     * @param {*} pageSize  显示数据条数
     * @return {*}
    */    
    /* async getDishesCategoryInfo(page,pageSize) {
      const { data: res } = await this.axios.post("/dishesCategory/list",{
        page:page,
        pageSize:pageSize,
      });
      // console.log(res);
      if(res.code==200){
          this.tableData=res.data;//将表格数据存入tableData数组中，并通过父传子传给table子组件
          this.allCount=res.count;//接收总数据条数
          this.nowTotalSize=res.data.length;//当前点击页的数据条数
          // console.log('当前页数据xxx',this.nowTotalSize);
          // console.log(this.allCount);
          // console.log('父组件接收到的后台表格数据',this.tableData);
      }
    }, */
    /**
     * @description: 查询时获取当前页的数据函数
     * @param {*} page 当前页码
     * @param {*} pageSize  显示数据条数
     * @return {*}
    */    
    async getDishesCategorySearchInfo(name,page,pageSize) {
      const { data: res } = await this.axios.post("/dishesCategory/list",{
        name:name,
        page:page,
        pageSize:pageSize,
      });
      // console.log(res);
      if(res.code==200){
        // console.log(res.data);
          this.tableData=res.data;//将表格数据存入tableData数组中，并通过父传子传给table子组件
          this.allCount=res.count;//接收总数据条数
          
          this.nowTotalSize=res.data.length;//当前点击页的数据条数
          // console.log('当前页数据xxx',this.nowTotalSize);
          // console.log(this.allCount);
          // console.log('父组件接收到的后台表格数据',this.tableData);
      }
    }
  },
};
</script>

<style lang='less' scoped>
.table-box {
  margin-top: 1.5rem;
  border: 0.1rem solid #dbe0e9;
  background-color: #fff;
}
</style>
